<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-show="IconMoreSubModalObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>批量导入图片信息</p>
        </div>
        <p class="f-l" style="line-height: 30px">最多可批量上传10张照片(图片格式：jpg、png、gif、jpeg)</p>
        <div class="photo-up-btn f-r">
          <input type="file" name="photo" ref="formFile" multiple  @change="filePhoto" class="modal-text f-l">
          <span class="photo-btn">选择相片</span>
        </div>

        <div class="clear-true"></div>
        <div class="file-plan-body" v-show="photoFiles.length!==0">
          <div class="plan" :style="{width:(plan/photoFiles.length)*100 + '%'}"></div>
          <span>{{plan}}/{{ photoFiles.length }}</span>
        </div>
        <div class="modal-ctrl-content ">
          <div class="modal-row" v-for="(imgItem,index) in photoFiles">
            <p>序号：{{ index+1 }}</p>
            <span class="remove-file glyphicon glyphicon-remove" @click="removeFile(index)"></span>
            <div class="f-l icon-name">图标名称：</div>
            <input type="text" maxlength="100" class="modal-text f-l" v-model="imgItem.name">
          <!--  <input type="hidden" name="photoId">-->
            <img :src="imgItem.imgSrc" class="f-l photo-img" alt="">
          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">上传</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "IconMoreSubModal",
        props:["IconMoreSubModalObj"],
        data(){
          return{
            photoFiles:[],
            plan:0,
          }
        },
        methods:{
          //提交
          subBtn(){
            //console.log(this.photoFiles);
            this.s_loading(true);
            let _this = this;
            //console.log(_this.photoFiles);
            subImgS(0);
            function subImgS(i){
              let param = new FormData();
              //console.log();
              let fileObj = _this.photoFiles[i].fileObj;
              param.append('file',fileObj);//通过append向form对象添加数据
              let configFile = {
                headers:{'Content-Type':'multipart/form-data'}
              };
              _this.$axios.post(baseURL+"api/jp-TIFS-FileCenter-ms/file",param,configFile)
                .then((data)=>{
                  //console.log(data.data.fileID);
                  let fileID = data.data.fileID;
                  //console.log(i);
                  if( i < _this.photoFiles.length ){
                    //console.log(_this.photoFiles);
                    let AddModalData = {
                      NAME: _this.photoFiles[i].name, //图标名称
                      STORE_ID: fileID,
                      UPLOAD_USER:_this.isLogin().userId
                    };
                    let paramsKey = [];
                    let paramsValue = [];

                    for( let key in AddModalData ){
                      paramsKey.push(key);
                      paramsValue.push(AddModalData[key]);
                    }

                    let params = {
                      "columns": paramsKey,
                      "dataTypeCode": "pointresource",
                      "datas": paramsValue,
                      "tableName": "T_RES_IMAGE_LIB"
                    };

                    _this.$axios.post(_this.HOST+"/base/save",params)
                      .then((data)=>{
                        //console.log(data);
                        if( data.data.success ){
                          //console.log("第"+ (i+1) +"张上传成功");
                          i++;
                          _this.plan = i;
                          if( i < _this.photoFiles.length ){
                            subImgS(i);
                          }else if(i === _this.photoFiles.length ){
                            _this.s_alert("上传完毕！");
                            _this.s_loading(false);
                            _this.s_logwrite("点位信息管理-图标库管理","批量上传图标");
                            _this.close();
                          }
                        }else{
                        }

                      })
                      .catch((err)=>{
                        //console.log("第"+ ( i+1) +"张上传失败");
                        //console.log(err);
                      })

                  }

                })
                .catch((err)=>{
                  _this.s_alert("上传失败！");
                  //console.log(err);
                });
            }
          },
          //选择图标
          filePhoto(ele){
            //this.photoFiles = ele.target.files;
            let len = this.photoFiles.length + ele.target.files.length;
            if( len > 10 ){
              this.s_alert("一次最多只能上传十张图标！");
              this.$refs.formFile.value = "";
              return false;
            }
            let imgArr = ele.target.files;
            for( let i=0;i<imgArr.length;i++ ){
              let imgTypeArr = imgArr[i].type.split("/");
              let imgType = imgTypeArr[imgTypeArr.length-1];
              //console.log(imgTypeArr);
              //console.log(imgType);
              if( this.verifyForm.isImg(imgType) ){
                let json = {
                  name:this.setImgName(imgArr[i].name),
                  imgSrc: window.URL.createObjectURL(imgArr[i]),
                  type:imgArr[i].type,
                  fileObj: imgArr[i]
                };
                this.photoFiles.push(json);
              }else{
                this.s_alert("已经为您筛选了非图标文件！");
              }
            }

            this.$refs.formFile.value = "";
            //console.log(this.photoFiles);
          },
          //删除图标
          removeFile(index){
            let msg = confirm("是否确认删除该图标？");
            if(msg){
              this.photoFiles.splice(index,1);
            }
          },
          //图标名称二次解析
          setImgName(name){
            let nameArr = name.split(".");
            nameArr.splice(nameArr.length-1,1);
            let imgName = "";
            for( let i=0;i<nameArr.length;i++ ){
              imgName += nameArr[i]
            }
            return imgName
          },
          //关闭弹窗
          close(){
            this.$emit("closeModalClose");
            this.clearData(); //关闭弹窗清除数据
          },
          //清除数据
          clearData(){
            this.photoFiles=[];
            this.plan = 0;
            this.$refs.formFile.value = "";
          }
        }
    }
</script>

<style scoped lang="scss">
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
  .modal-row{
    height: 60px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-sizing: border-box;
    padding-bottom: 10px;

    .modal-text{
      width: 70% !important;
      margin-top: 15px;
    }
    .photo-img{
      height: 100%;
      max-width: 70px;
      float: right;
    }
  }
  .photo-up-btn{
    position: relative;
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;

    input{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      opacity: 0;
    }
    span{
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: #31b0d5;
      color: #fff;
      border-radius: 4px;
    }
    .modal-text{
      width: 100% !important;
    }
  }
  .modal-ctrl-body .modal-ctrl-content{
    height: 400px;
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    padding-right: 10px;
    padding-top: 10px;
    .icon-name{
      margin-top: 15px;
      line-height: 30px;
    }
    p{
      position: absolute;
      left: 0;
      top: -10px;
    }
    .remove-file{
      position: absolute;
      z-index: 5;
      right: -3px;
      top: -2px;
      color: rgba(0,0,0,.8);
      cursor: pointer;
      width: 17px;
      height: 17px;
    }
  }
  .file-plan-body{
    width: 100%;
    height: 15px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background-color: rgba(38,154,188,0.6);
    margin-top: 10px;
    span{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      text-align: center;
      line-height: 15px;
      font-size: 12px;
      color: #fff;
    }
    .plan{
      float: left;
      width: 0;
      height: 100%;
      background-color: #31b0d5;
      -webkit-transition: all 0.5s ;
      -moz-transition: all 0.5s ;
      -ms-transition: all 0.5s ;
      -o-transition: all 0.5s ;
      transition: all 0.5s ;
    }
  }
</style>
